<template>
  <div class="roleedit">
    <el-scrollbar>
      <!-- height="300px" -->
      <el-form
        ref="roleForm"
        class="roleForm"
        :model="pageData.formData"
        :rules="pageData.formRules"
        status-icon
        label-width="100px"
      >
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="角色编码：" prop="fusername">
              <el-input
                v-model="pageData.formData.fusername"
                placeholder="请输入角色编码"
                :disabled="!pageData.isAdd"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="角色全称：" prop="ffullname">
              <el-input
                v-model="pageData.formData.ffullname"
                placeholder="请输入角色全称"
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="适用类型：" prop="funittypeid">
              <el-select
                v-model="pageData.formData.funittypeid"
                placeholder="请选择类型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in pageData.typeEnumArr.filter((p) => p.value > -1)"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="数据权限：" prop="fpermission">
              <el-select
                v-model="pageData.formData.fpermission"
                placeholder="请选择类型"
                style="width: 100%"
              >
                <el-option
                  v-for="item in pageData.permissionEnumArr.filter((p) => p.value > -1)"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="24">
            <el-form-item label="状态：" prop="state">
              <el-select
                v-model="pageData.formData.state"
                placeholder="请选择状态"
                style="width: 100%"
              >
                <el-option
                  v-for="item in pageData.stateEnumArr.filter(
                    (p) => p.value > -1
                  )"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-scrollbar>
    <el-row>
      <el-col :span="24" style="text-align: right">
        <el-button @click="onHandleCancel">取 消</el-button>
        <el-button
          :v-if="
            (pageData.isAdd && pageData.permissions.Add) ||
            (!pageData.isAdd && pageData.permissions.Edit)
          "
          type="primary"
          @click="onHandleSure"
          >确 定</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs } from "vue";
import { ElLoading, ElMessage } from "element-plus";
import utils from "@/common/utils";
import enums from "@/common/enums";
const lodash = require("lodash");

import { createRole, updateRole } from "@/api/system";

export default {
  name: "RoleEdit",
  components: {},
  props: {
    modifyObj: { type: Object, required: true },
    isAdd: { type: Boolean, required: true, default: false },
  },
  setup(props, context) {
    onMounted(() => {
      if (props.isAdd) {
        pageState.pageData.formData = {
          fuserid: "",
          fusername: "",
          ffullname: "",
          funittypeid: 0,
          fpermission: 0,
          state: enums.StateEnum.Enable.value,
        };
      } else pageState.pageData.formData = lodash.cloneDeep(props.modifyObj);
    });

    const roleForm = ref();
    const pageState = reactive({
      pageData: {
        permissions: {
          Add: utils.checkPermission("sysrole_add"),
          Edit: utils.checkPermission("sysrole_edit"),
        },
        typeEnumArr: enums.OrgTypeEnum.getObjArray(),
        permissionEnumArr: enums.PermissionEnum.getObjArray(),
        stateEnumArr: enums.StateEnum.getObjArray(),
        formData: {},
        formRules: {
          fusername: [
            { required: true, message: "请输入角色编码", trigger: "blur" },
          ],
          ffullname: [
            { required: true, message: "请输入角色全称", trigger: "blur" },
          ],
          funittypeid: [
            { required: true, message: "请选择适用类型", trigger: "blur" },
          ],
          fpermission: [
            { required: true, message: "请选择数据权限", trigger: "blur" },
          ],
          state: [{ required: true, message: "请选择状态", trigger: "blur" }],
        },
        isAdd: props.isAdd,
      },
    });
    const pageFunc = {
      onHandleCancel: () => {
        roleForm.value?.resetFields();
        context.emit("cancel");
      },
      onHandleSure: () => {
        roleForm.value?.validate((valid) => {
          if (valid) {
            const loading = ElLoading.service({
              lock: true,
              background: "rgba(0, 0, 0, 0.7)",
            });
            if (props.isAdd) {
              // 新增  测通
              createRole(pageState.pageData.formData)
                .then((res) => {
                  console.log("新增角色", res);
                  loading.close();
                  context.emit("ok", {
                    isAdd: props.isAdd,
                    retObj: pageState.pageData.formData,
                  });
                })
                .catch((error) => {
                  console.log("first", error);
                  if (error.message === "数据库已存在重复数据") {
                    loading.close();
                    ElMessage.error("角色编码重复，请重新输入");
                  }else{
                    loading.close();
                    ElMessage.error(error.message || "请求出错");
                  }
                  // loading.close();
                  // ElMessage.error(error.message || "请求出错");
                });
            } else {
              // 修改测通
              updateRole(pageState.pageData.formData)
                .then(() => {
                  loading.close();
                  context.emit("ok", {
                    isAdd: props.isAdd,
                    retObj: pageState.pageData.formData,
                  });
                })
                .catch((error) => {
                  loading.close();
                  ElMessage.error(error.message || "请求出错");
                });
            }
          } else return false;
        });
      },
    };

    return {
      roleForm,
      ...toRefs(pageState),
      ...pageFunc,
    };
  },
};
</script>

<style lang="scss">
.roleedit {
  height: 100%;
  background-color: white;
  .roleForm {
    width: calc(100% - 6px);
  }
}
</style>
